<template>
    <el-row>
        <el-row style="padding:20px;background:#f8f8f8">
            <el-col :span="15" style="margin-bottom:16px">
                <span style="font-size:14px">订单搜索：</span>
                <el-select v-model="search.type">
                    <el-option value="orderid" label="订单号"></el-option>
                </el-select>
                <el-input style="width:205px;margin-left:16px" v-model="search.keyword"></el-input>
            </el-col>
            <el-col :span="9" style="margin-bottom:16px">
                <span style="font-size:14px">支付状态：</span>
                <el-select v-model="search.pay_status" style="width:220px">
                    <el-option label="请选择" :value="-1"></el-option>
                    <el-option label="未支付" :value="0"></el-option>
                    <el-option label="已支付" :value="1"></el-option>
                </el-select>
            </el-col>
            <el-col :span="15" style="margin-bottom:16px">
                <span style="font-size:14px">下单时间：</span>
                <el-date-picker v-model="search.orderTimeRange" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:440px">
                </el-date-picker>
            </el-col>
            <el-col :span="9">
                <span style="font-size:14px">订单状态：</span>
                <el-select v-model="search.status" style="width:220px">
                    <el-option label="请选择" :value="-4"></el-option>
                    <el-option label="待发货" :value="0"></el-option>
                    <el-option label="已发货" :value="1"></el-option>
                    <el-option label="已完成" :value="2"></el-option>
                    <el-option label="已评价" :value="3"></el-option>
                    <el-option label="退款完成" :value="4"></el-option>
                    <el-option label="售后完成" :value="5"></el-option>
                    <el-option label="已关闭" :value="-1"></el-option>
                    <el-option label="退款中" :value="-2"></el-option>
                    <el-option label="售后中" :value="-3"></el-option>
                </el-select>
            </el-col>
            <el-col :span="24">
                <el-button type="primary" @click="searchOrder" style="margin-left:70px">搜索</el-button>
                <el-button type="text" @click="clearSearch">清空</el-button>
            </el-col>
        </el-row>
        <el-table :data="orderData" stripe style="margin-top:24px" @selection-change="SelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column label="商品" width="240">
                <template slot-scope="scope">
                    <el-row>订单号：{{scope.row.orderid}}</el-row>
                    <el-row>下单时间：{{format(scope.row.created_at)}}</el-row>
                    <div style="display:flex;margin-top:10px" v-for="(item,index) in scope.row.detail" :key="index">
                        <img :src="item.product.img_url" alt="" style="width:80px;height:80px">
                        <div style="flex:1;padding:2px 7px">
                            <div class="text_overflow text_overflow_line_2">{{item.name}}</div>
                            <div style="color:#f50;margin-top:8px">¥ {{item.price}}</div>
                        </div>
                    </div>
                    <div v-if="scope.row.remark" style="margin-top:10px">备注：{{scope.row.remark}}</div>
                </template>
            </el-table-column>
            <el-table-column label="单价/数量" header-align="center" align="center">
                <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.detail" :key="index" style="padding-top:45px">
                        <div>¥{{item.price}}</div>
                        <div>{{item.num}}{{item.product.unit}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="买家人/收货人" header-align="center" align="center" width="160">
                <template slot-scope="scope">
                    <div style="min-height:80px;padding-top:15px" v-if="scope.row.contact">
                        <div>{{scope.row.contact.name}}</div>
                        <div>{{scope.row.contact.phone}}</div>
                        <div>{{scope.row.contact.address}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="配送方式" header-align="center" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.kuaidi&&scope.row.kuaidi.delivery_name">
                        <div>{{scope.row.kuaidi.delivery_name}}</div>
                        <div>{{scope.row.kuaidi.tracking_number}}</div>
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column prop="pay_status" label="支付状态" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-row style="font-weight:700" :style="{color:scope.row.pay_status==1?'#19be6b':'#f50'}">{{scope.row.pay_status == 0 ? "未支付":"已支付"}}</el-row>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-row style="font-weight:700" :style="{color:scope.row.status==2?'#19be6b':'#f50'}">{{scope.row.status==0?"待发货":scope.row.status==1?"已发货":scope.row.status==2?"已完成":scope.row.status==3?"已评价":scope.row.status==4?"退款完成":scope.row.status==5?"售后完成":scope.row.status==-1?"已关闭":scope.row.status==-2?"退款中":"售后中"}}</el-row>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" header-align="center" width="60">
                <template slot-scope="scope">
                    <!-- <el-button type="text" @click="productEdit(scope.row)">改价</el-button> -->
                    <el-tooltip content="详情">
                        <i class="iconfont icon-xiangqing" @click='productDetail(scope.row)' style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                    </el-tooltip>
                    <!-- <el-button type="text" @click="cancelOrder(scope.row)">取消订单</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin:24px 0">
            <el-col :span="12">
                <el-button @click="fahuo">一键发货</el-button>
            </el-col>
            <el-col :span="12" style="text-align:right">
                <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            orderData: [],
            pagination: {},
            search: {
                type: "orderid",
                keyword: "",
                pay_status: -1,
                status: -4,
                orderTimeRange: [],
                start_time: "",
                end_time: ""
            },
            selectOrder: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            }
        };
    },
    async asyncData({ app }) {
        let data = {};
        //订单列表
        const order = await app.$axios.$get(
            "/api/shop/home/shop/order/index/index"
        );
        if (order && order.errmsg === "ok") {
            data.orderData = order.data.data;
            data.pagination = order.data.pagination;
        }
        return data;
    },
    methods: {
        //商品列表
        async getOrder() {
            let url = `/api/shop/home/shop/order/index/index?page=${
                this.pagination.page
            }`;
            if (this.search.keyword) {
                url += `&type=${this.search.type}&keyword=${
                    this.search.keyword
                }`;
            }
            if (this.search.pay_status != -1) {
                url += `&pay_status=${this.search.pay_status}`;
            }
            if (this.search.status != -4) {
                url += `&status=${this.search.status}`;
            }
            if (this.search.orderTimeRange.length) {
                url += `&start_time=${this.format(
                    this.search.orderTimeRange[0]
                )}&end_time=${this.format(this.search.orderTimeRange[1])}`;
            }
            const order = await this.$axios.$get(url);
            if (order && order.errmsg === "ok") {
                this.orderData = order.data.data;
                this.pagination = order.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getOrder();
        },
        //搜索
        searchOrder() {
            this.pagination.page = 1;
            this.getOrder();
        },
        clearSearch() {
            this.search = {
                type: "orderid",
                keyword: "",
                pay_status: -1,
                status: -4,
                orderTimeRange: [],
                start_time: "",
                end_time: ""
            };
            this.pagination.page = 1;
            this.getOrder();
        },
        //查看详情
        productDetail(row) {
            this.$router.push({
                path: "/shop/order/detail",
                query: { id: row.id }
            });
        },
        //取消订单
        async cancelOrder(row) {
            if (row.status != 0) {
                this.$message.warning("该订单不能取消");
                return;
            }
            const res = await this.$axios.$get(
                `/api/shop/home/shop/order/index/update?id=${row.id}&status=-1`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("订单已取消");
                this.getOrder();
            }
        },
        //一键发货
        SelectionChange(val) {
            this.selectOrder = val;
        },
        async fahuo() {
            if (!this.selectOrder.length) {
                this.$message.warning("请选择订单");
                return;
            }
            let ids = [];
            for (let key in this.selectOrder) {
                ids.push(this.selectOrder[key].id);
            }
            const res = await this.$axios.$get(
                `/api/shop/home/shop/order/index/delivery?id=${ids.join()}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("已发货");
                this.getOrder();
            }
        }
    }
};
</script>
